<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <script src="libs/jquery.js"></script>
    <script src="libs/template.js"></script>
    <style type="text/css">
		body,div,
		section,
		form,p,
		ul,li,img{
			margin: 0;
			padding: 0;			
		}
		li{
			list-style: none;
		}
		.wrapper{
			width: 900px;
			height: 450px;
			margin: 20px auto;
			border: 1px solid blueviolet;
			background-color:rgb(43,125,199);
			color: white;
		}
		.wrapper img{
			margin: 15px 0;
		}
		.qiehuan{
			background:rgb(14,86,151);
		}
		.qiehuan input:nth-of-type(1){
			width: 200px;
			height: 28px;
			margin: 5px 0 5px 5px;
		}
		.qiehuan input:nth-of-type(2){
			height: 30px;
		}
		.shishi{
			margin: 30px 25px;
		}
		.shishi p {
			margin-top: 10px;
		}
		.shishi .kongqi span{
			background-color: orange;
			padding: 3px;
		}
		.weilai{
			display: flex;
			justify-content: space-around;
			padding: 10px;
		}
		.weilai ul{
			flex-basis: 225px;
			text-align: center;
			border-left: 1px gainsboro solid;
			box-sizing: border-box;
		}
		.weilai .one{		
			border-left: none;
		}		
		.weilai li:nth-of-type(3) p{
			margin-top: 10px;
		}	
    </style>
</head>
<body>
	<div class="wrapper">
		<section class="qiehuan">
			<form >
				<input type="text" value="" placeholder="请切换城市"/>
				<input type="submit" />
			</form>
		</section>
		<section class="shishi">
			<p><span class="riqi">01月17日</span><span class="didian" style="margin-left: 20px; font-weight: bold;">郑州</span></p>
			<p class="kongqi">空气质量：<span class="pm">397</span><span class="zhishu">严重污染</span></p>
            <p >穿衣指数：<span class="chuxing" style="width: 400px;display: inline-block;vertical-align:top ">11111</span></p>
		</section>
		<script>		
			template.helper('price1',function(data) {
				return time = data.slice(14,16)
			})
			template.helper('price2',function(data) {
				return time = data.slice(0,2)
			})
			template.helper('price',function(data) {
				return time = data.splice(0,1)
			})
		</script>
		<script id="mytem" type="text/html">			
			<ul class="one">				
				<li>
					<p >{{weather_data[0].date | price2}}</p>			
					<p style="margin-top: 5px;">(实时:{{weather_data[0].date | price1}})</p>
				</li>
				<li><img src="{{weather_data[0].dayPictureUrl}}"/></li>
				<li>
					<p>{{weather_data[0].temperature}}</p>
					<p>{{weather_data[0].weather}}</p>
					<p>{{weather_data[0].wind}}</p>
				</li>
			</ul>
			{{weather_data | price }}
			{{each weather_data as da index }}
			<ul >
				<li>
					<p >{{da.date}}</p>				
				</li>
				<li><img src="{{da.dayPictureUrl}}"/></li>			
				<li>
					<p>{{da.temperature}}</p>
					<p>{{da.weather}}</p>
					<p>{{da.wind}}</p>
				</li>
			</ul>
			{{/each}}
		</script>
		
		<!--页面布局-->
		<section class="weilai"></section>		
	</div>
</body>
<script>
    // 根据开放的API接口及相关的属性信息，获取服务器中的数据
    // getJSON()获取json数据
    // url:请求的Url接口地址，是服务器对外开放的一个接口
    
    var didian = '杭州'
    function show(){    	
	    $.getJSON({
	        url:'http://api.map.baidu.com/telematics/v3/weather?callback=?',
	        data:{
	            ak:'QSvktjUUa3PE5lIASNlNae6uqzMbK5oG',
	            location:didian,
	            output:'json'
	        },
	        success:function(data){        	
	        	datas = data.results[0]
	        	console.log(data)
	        	$('.riqi').text(data.date)
	        	$('.didian').text(data.results[0].currentCity)
                $('.chuxing').text(data.results[0].index[0].des)
	        	$('.pm').text(data.results[0].pm25)
	        	var pm = data.results[0].pm25
	        	if (pm > 500){
	        		console.log(1)
	        		$('.kongqi').children("span").css('background-color','darkred').last().text('重度污染')
	        		$('.wrapper').css('background-color','gray')
	        	}else if(pm>300){
	        		console.log(2)
	        		$('.kongqi').children("span").css('background-color','orangered').last().text('严重污染')
	        		$('.wrapper').css('background-color','gray')
	        	}else if(pm>150){
	        		console.log(3)
	        		$('.kongqi').children("span").css('background-color','orange').last().text('中度污染')
	        		$('.wrapper').css('background-color','gray')
	        	}else{
	        		console.log(4)
	        		$('.kongqi').children("span").css('background-color','green').last().text('空气良好')
	        		$('.wrapper').css('background-color','rgb(43,125,199)')
	        	}
	        	var html = template('mytem',datas)				
				$('.weilai').html(html)
	        }
	    })
    }
    show()
    $('form').submit(function(ev) {
    	ev.preventDefault()
    	didian = $(':text').val()
    	show()
    	
    })
</script>
</html>